<template>
    <div id="cutZero">
        <v-nav></v-nav>
        <div class="newProductListWrapper">
            <section style="margin-top: 1rem">
                <mt-loadmore  :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"  :topDistance="20" :bottomDistance="20" :topPullText="topPullText" :topDropText="topDropText" :bottomPullText="bottomPullText" :auto-fill="false">
                    <div :class="y%2==0?'newProductList flo-l':'newProductList flo-r'" v-for="(x,y) in list" :id="x.pro_id" :type="x.id_type" @click="goNewDetail(x.pro_id,x.id_type)" :key="y">
                        <header>
                            <dl>
                                <dd><img :src="x.pro_img"></dd>
                                <img v-if="x.stock_num===1" src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/WechatIMG146.png" style="position:absolute;top: 15%;left:27%;width: 1.8rem;height:1.8rem;">
                                <dt style="text-align: left">{{x.subtitle}}</dt>
                            </dl>
                        </header>
                        <footer>
                            <div>
                                <span class="priceColor flo-l">￥</span>
                                <span class="flo-l"><del class="priceColor">{{x.pro_price}}</del></span>
                                <span v-if="howMoney" class="flo-r">砍到{{x.min_shop_price}}元</span>
                                <span v-else class="flo-r">砍到1分</span>
                            </div>
                        </footer>
                        <!--没有库存显示水印-->
                        <img v-if="x.stock_has===0" src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/WechatIMG146.png" style="position:absolute;top: 17%;left:27%;width: 1.8rem;height:1.8rem;">
                    </div>
                </mt-loadmore>
                <span v-if="lookMore" style="font-size: .26rem;color: #969696;text-align: center;display: block;">下拉查看更多</span>
            </section>
        </div>
    </div>
</template>

<script>
    import store from "../store/newStore.js";
    import config from "../config/config.js";
    import share from "../share/share.js";
    import Nav from "../home/nav.vue";
    import MtaH5 from 'mta-h5-analysis';
    export default {
        name: "cut-zero",
        store,
        data() {
            return {
              list: [],
              allLoaded:Boolean,
              topPullText:'',
              bottomPullText:'',
              topDropText:'下拉刷新',
              pageSize:1,
              howMoney:true,
              lookMore:false
            }
        },
        computed:{
            ticket(){
                return this.$store.state.getTicket;
            }
        },
        components:{
            "v-nav":Nav
        },
        methods: {
            getViewInfo(pageSize) {
                var tag = this.$route.params.tag;
                var value = JSON.stringify({
                        "page": pageSize,
                        "tag": tag,
                        "token": localStorage.getItem('token')
                    }),
                    key = demo(value);
                axios.post('/Home/home/HomeTopButton', {
                        value: value,
                        key: key,
                        ticket:this.ticket
                }, config)
                    .then(function (response) {
                      if(this.$route.path == '/CutZero/CUT_TO_ZERO'){
                        this.$nextTick(function(){
                          this.howMoney = false;
                        })
                      }
                      if (response.data.code == 200) {
                            if(pageSize==1){
                                this.list=response.data.data.list;
                            }else{
                                this.list=this.list.concat(response.data.data.list);
                            }
                            if(response.data.data.listNum==pageSize){
                                this.$nextTick(function(){
                                    this.allLoaded=true;
                                  this.lookMore=false;
                                })
                            }else{
                                this.$nextTick(function(){
                                    this.allLoaded=false;
                                  this.lookMore=true;
                                })

                            }
                            this.$store.commit('increment',response.data.ticket);
                        }else{
                            this.$store.commit('increment',response.data.ticket);
                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            goNewDetail(id,type){
                this.$router.push('/newDetail/'+id+'/'+type)
            },
            // loadTop() {
            //     var self = this;
            //     self.pageSize=1;
            //     setTimeout(function () {
            //         self.getViewInfo(self.pageSize);
            //         self.$refs.loadmore.onTopLoaded();
            //     }, 500);
            // },
            loadBottom(){
                var self = this;
                setTimeout(function () {
                    self.pageSize++;
                    self.getViewInfo(self.pageSize);
                    self.$refs.loadmore.onBottomLoaded();
                }, 500);
            },
            scrollEvent(e) {
                sessionStorage.setItem('cutZeroTop', e.target.scrollTop);
            }
        },

        activated() {
            var that = this;
            document.getElementById('outer').addEventListener('scroll', this.scrollEvent)
            if (sessionStorage.getItem('cutZeroTop')) {
                document.getElementById('outer').scrollTop = sessionStorage.getItem('cutZeroTop');
            }
            share({})
            this.getViewInfo(this.pageSize);
            MtaH5.init({
                "sid":'500594815',
                "cid":'500595819',
                "autoReport":0,
                "senseHash":0,
                "senseQuery":0,
                "performanceMonitor":0,
                "ignoreParams":[]
            });
            MtaH5.pgv();
        },
        deactivated () {
            document.getElementById('outer').removeEventListener('scroll', this.scrollEvent);
        },
        beforeDestroy () {
            document.getElementById('outer').removeEventListener('scroll', this.scrollEvent);
        }
    }
</script>

<style scoped>

</style>